<template>
  <!-- 点检完成汇总 -->
  <div class="echartsDiv">
    <div v-if="data" id="equipmentLine" style="width: 100%; height: 100%" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from "echarts";
export default {
  props: {},
  data() {
    return {
      myChart: null,
      data: {},
    };
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize();
    },
    /* 设备总览 */
    setEquipmentLine(data) {
      this.data = data;
      const option = {
        grid: {
          show: false,
          top: "10%",
          right: "0",
          bottom: "20%",
          left: "16%",
        },
        xAxis: {
          // scale: true,
          position: "bottom", // x轴的位置
          offset: 10, // x轴相对于默认位置的偏移
          splitLine: { show: false },
          axisLine: {
            // 坐标轴 轴线
            lineStyle: {
              color: "#0B4074",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            color: "#fff",
            // interval: 0 // 代表显示所有x轴标签显示
          },
          axisTick: {
            show: false,
          },
          type: "category",
          data: data.time,
        },
        yAxis: {
          scale: true,
          position: "left", // x轴的位置
          offset: 20, // x轴相对于默认位置的偏移
          splitLine: { show: false },
          axisLine: {
            // 坐标轴 轴线
            show: true,
            lineStyle: {
              color: "#0B4074",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          type: "value",
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            stack: "Total",
            data: data.num,
            type: "bar",
            barWidth: "50%",
            label: {
              formatter: "{c}",
              show: true,
              position: "top",
              fontWeight: "normal",
              fontSize: "10",
              color: "#fff",
            },
            itemStyle: {
              // 设置渐变色，使得柱体亮度更高
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FFD700" }, // 渐变为金黄色
                { offset: 1, color: "#FFA500" },
              ]),
              // 设置更亮的阴影颜色
              shadowBlur: 20,
              shadowColor: "rgba(255, 255, 255, 0.5)", // 使用白色阴影
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
            emphasis: {
              // 鼠标悬停时的样式
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#00FFFF" }, // 从浅蓝开始
                  { offset: 1, color: "#1592FE" }, // 到深蓝色
                ]),
                shadowBlur: 25,
                shadowColor: "rgba(255, 255, 255, 0.8)", // 更强的白色阴影
                shadowOffsetX: 6,
                shadowOffsetY: 6,
              },
            },
          },
        ],
      };
      if (
        this.myChart != null &&
        this.myChart !== "" &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose(); // 销毁
      }
      this.myChart = echarts.init(document.getElementById("equipmentLine"));
      this.myChart.clear();
      this.myChart.setOption(option, true);
      // this.myChart.on('click', function (param) {
      //   that.$emit('eqOverViewInfo', param['name'])
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
.echartsDiv {
  height: 100%;
}
</style>
